<!--
 * @Author: your name
 * @Date: 2021-12-26 02:02:07
 * @LastEditTime: 2021-12-26 02:35:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homeStayMS\src\main\resources\static\vue\MainPage\roomManage\ruzhuFrame.vue
-->

<template>
  <el-dialog
    width="30%"
    :title="frameTitle"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isOpenFrame"
    @open="openFrameCB()"
    @close="closeFrameCB()"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="房客姓名" prop="tName">
        <el-input v-model="form.tName"></el-input>
      </el-form-item>

      <el-form-item label="身份证号" prop="idNum">
        <el-input v-model="form.idNum"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phoneNum">
        <el-input v-model="form.phoneNum"></el-input>
      </el-form-item>

      <el-form-item label="房间号" prop="rNum">
        <el-input v-model="form.rNum"></el-input>
      </el-form-item>

      <el-form-item label="天数" prop="day">
        <el-input v-model="form.day"></el-input>
      </el-form-item>

      <el-form-item label="时间" prop="time">
        <el-date-picker
          style="width: 100%"
          v-model="form.time"
          align="right"
          type="date"
          placeholder="选择日期"
          size="small"
        />

        <!-- <el-input v-model="form.time"></el-input> -->
      </el-form-item>

      <el-form-item label="押金" prop="deposit">
        <el-input v-model="form.deposit"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <section>
        <el-button @click="closeFrame()">取消返回</el-button>
        <el-button type="primary" @click="handleConfirm()">
          {{ comfirmButtonName }}
        </el-button>
      </section>
    </template>
  </el-dialog>
</template>

<script>
import api from '../../../js/api/api.js';

const big2small = (big, small) => {
  if (!!big) {
    Object.keys(small).forEach((key) => {
      if (!!big[key]) {
        const target = big[key];
        if (!!target || target === 0) {
          small[key] = target;
        } else {
          small[key] = small[key];
        }
      }
    });
  }
};

export default {
  name: 'ruzhuFrame',

  props: {
    dialogVisible: {
      default: false,
    },

    // 是否编辑？ 不是编辑就是新增。 这个设计不合理，但是项目目前是简陋的，允许这样处理。
    isEdit: {
      default: false,
    },
    //业务主键id
    id: {
      default: '',
    },
  },

  data() {
    return {
      form: {
        tName: '',
        idNum: '',
        phoneNum: '',
        rNum: '',
        day: '',
        time: '',
        deposit: '',
      },
    };
  },

  computed: {
    isOpenFrame: {
      get() {
        return this.dialogVisible;
      },

      set(value) {
        if (!value) {
          this.$emit('update:dialogVisible', false);
        }
      },
    },

    // 弹框标题
    frameTitle() {
      return this.isEdit ? '编辑' : '新增';
    },

    comfirmButtonName() {
      return this.isEdit ? '确认修改' : '确认新增';
    },
  },

  methods: {
    closeFrame() {
      this.$emit('update:dialogVisible', false);
    },

    /** 检验表单内容是否都通过了校验？ 本方法借助于elementUI的el-form组件的校验方法 */
    isFormAllPassValidate() {
      // 默认全部的内容都填写完毕
      let res = true;
      this.$refs['form'].validate((validateRes, validateItemObj) => {
        if (!validateRes) {
          res = false;
          return false;
        }
      });
      return res;
    },

    // 入住。
    async addNew() {
      const postData = {
        ...this.form,
        id: localStorage.getItem('userId'),
        // 父组件传递给子组件的组件id 此时是房间id
        rId: this.id,
      };
       api.addRuzhuInfo(postData).then((res) => {
          this.getTableList();
          this.$message.success(' 入住成功！ ');

      });
    },

    // 修改门店信息
    async updateStoreInfo() {
      const postData = {
        ...this.form,

        // 修改门店时，不需要传递用户id以便识别。
        // id: localStorage.getItem('userId'),
      };

      await api.updateRoom(postData).then((res) => {
        if (res.status === 200 && res.data.status) {
          this.$message.success(' 修改成功！ ');
        }
      });
    },

    /** 处理确认按钮功能 */
    async handleConfirm() {
      if (this.isFormAllPassValidate()) {
        if (this.isEdit === true) {
          await this.updateStoreInfo();
        } else {
          await this.addNew();
        }

        // 关闭弹框
        this.closeFrame();
        // 立刻更新父组件的列表数据
        this.$emit('updateTableList');
      } else {
        this.$message.error(' 尚未填写完全部的必填项，请检查！ ');
      }
    },

    // 根据门店id获取门店数据
    async getById() {
      console.log('xxxx');
      if (this.id) {
        await api.getRoomByRid({ rId: this.id }).then((res) => {
          if (res.status === 200 && res.data.status) {
            console.log(' res ', res.data);
            // 门店数据赋值，
            big2small(res.data.result, this.form);
          }
        });
      }
    },

    // 打开弹窗的回调函数
    async openFrameCB() {
      await api.getAllStore().then((res) => {
        if (res.data.status) {
          console.log(' res ', res.data);
          // 门店数据赋值，
          this.storeList = res.data.result;
        }
      });

      if (this.id) {
        await this.getById();
      }
    },

    // 关闭窗口的回调函数，清空重设全部数据
    closeFrameCB() {
      this.$refs['form'].resetFields();
    },
  },
};
</script>
